import React, { useState, useEffect, useRef } from "react";
import { LiveProvider, LiveError, LivePreview } from "react-live";
import * as echarts from "echarts";
import "./style/index.css"

export default function ReactPlayground(props: {
  code: string;
  codeProps?: object;
}) {
  const { code, codeProps = {} } = props;

  const scope = { useState, useEffect, useRef, echarts, props: codeProps };

  const transformCode = (code: string) => {
    const regex = /\(.*?\)\s*=>/;

    const removedArgumentProps = code.replace(regex, "() => ");

    return removedArgumentProps;
  };

  return (
    <LiveProvider code={code} scope={scope} transformCode={transformCode}>
      <div className={"lowcode-reactplayground"}>
        <LivePreview className={"lowcode-reactplayground-preview"} />
        <LiveError className={"lowcode-reactplayground-error"} />
      </div>
    </LiveProvider>
  );
}
